<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="a_vuejs/vue.global.js"></script>

</head>
<body>

<div id="app">
    <h3>具名插槽:具有名字的插槽 </h3>
    <h3>当有多个插槽空位子的时候:我们可以根据名字将不同的内容插入到指定的位置</h3>
    <coma>
        <!-- myData:将username、goods全部接收过来 -->
        <template #one="myData">
            用户名:{{myData.username}}
            商品:<br/>
            <template v-for="g in myData.goods">
            <span >id:{{g.id}},goodsName:{{g.goodsName}}</span><br/>
            </template>
        </template>
    </coma>

</div>

</body>

<script>

    Vue.createApp({
        components:{
            'coma':{
                data(){ //数据是在子组件中
                  return{
                      userName:'张三',
                      goods:[
                          {id:1,goodsName:'小米手机'},
                          {id:2,goodsName:'苹果手机'},
                          {id:3,goodsName:'一加手机'},
                          {id:4,goodsName:'vivo手机'}
                      ]
                  }
                },
                template:'<div style="width: 600px;height: 200px;background-color: greenyellow"> 这里是子组件 ' +
                    '<slot name="one" :username="userName" :goods="goods"></slot> ' +
                    '<slot name="tow"></slot> ' +
                    '<slot name="three"></slot> ' +
                    '</div>'
            }
        }
    }).mount("#app")
</script>

</html>